<template>
    <div>
    <div class="Recruit">
        <!--人才招聘-->
        人才招聘
        <div style="margin-top: 15px; margin-left: 50%;">
            <el-input placeholder="请输入招募标题、招募职位" v-model="input01" class="input-with-select">
                <el-button slot="append" type="primary" icon="el-icon-search">搜索</el-button>
            </el-input>
        </div>

        <div class="scroll">

        <ul class="infinite-list"  infinite-scroll-distance="0" >
            <li>
            <el-descriptions column="1" title="固体发酵和半仿生-生物酶技术用于中药药效物质提取的研究项目招聘需求">
                <el-descriptions-item label="招聘职位">研究助理</el-descriptions-item>
                <el-descriptions-item label="招聘人数">2</el-descriptions-item>
                <el-descriptions-item label="工作地点">桂林市</el-descriptions-item>
                <el-descriptions-item label="发布时间">2021-08-21</el-descriptions-item>
                <el-divider></el-divider>
            </el-descriptions>
            </li>
            <li>
            <el-descriptions column="1" title="66种常用中药材质量标准及其对照品的研究招聘需求">
                <el-descriptions-item label="招聘职位">研究助理</el-descriptions-item>
                <el-descriptions-item label="招聘人数">3</el-descriptions-item>
                <el-descriptions-item label="工作地点">石家庄市</el-descriptions-item>
                <el-descriptions-item label="发布时间">2021-08-21</el-descriptions-item>
                <el-divider></el-divider>
            </el-descriptions>
            </li>
            <li>
            <el-descriptions column="1" title="66种常用中药材质量标准及其对照品的研究招聘需求">
                <el-descriptions-item label="招聘职位">研究助理</el-descriptions-item>
                <el-descriptions-item label="招聘人数">1</el-descriptions-item>
                <el-descriptions-item label="工作地点">上海市</el-descriptions-item>
                <el-descriptions-item label="发布时间">2021-08-21</el-descriptions-item>
                <el-divider></el-divider>
            </el-descriptions>
            </li>
            <li>
                <el-descriptions column="1" title="66种常用中药材质量标准及其对照品的研究招聘需求">
                    <el-descriptions-item label="招聘职位">研究助理</el-descriptions-item>
                    <el-descriptions-item label="招聘人数">1</el-descriptions-item>
                    <el-descriptions-item label="工作地点">上海市</el-descriptions-item>
                    <el-descriptions-item label="发布时间">2021-08-21</el-descriptions-item>
                    <el-divider></el-divider>
                </el-descriptions>
            </li>
            <li>
                <el-descriptions column="1" title="66种常用中药材质量标准及其对照品的研究招聘需求">
                    <el-descriptions-item label="招聘职位">研究助理</el-descriptions-item>
                    <el-descriptions-item label="招聘人数">1</el-descriptions-item>
                    <el-descriptions-item label="工作地点">上海市</el-descriptions-item>
                    <el-descriptions-item label="发布时间">2021-08-21</el-descriptions-item>
                    <el-divider></el-divider>
                </el-descriptions>
            </li>
<!--            style="overflow:auto"-->
        </ul>
        </div>


        <div class="block" >
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[100, 200, 300, 400]"
                    :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
            </el-pagination>
        </div>
    </div>
    </div>
</template>

<script>
    export default {
        name:'Recruit',
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        },
        data() {
            return {
                currentPage1: 5,
                currentPage2: 5,
                currentPage3: 5,
                currentPage4: 4,

            };
        }
    }
</script>

<style>
    .Recruit{
        /*float: right;*/
        /*position: absolute;*/
        float: left;
        margin-right: 1%;
        text-align: center;
        width: 100%;
        height: auto;
    }

    .scroll{
        height: 450px;
        width: auto;
        overflow: auto;
    }

    /*.block{*/
    /*    !*!*align-content: center;*!*!*/
    /*    !*!*width: 20px;*!*!*/
    /*    !*height: auto;*!*/
    /*    !*width: auto;*!*/
    /*    !*position: absolute;*!*/
    /*    !*!*style="margin-top: 450px; margin-left: 10%;"*!*!*/
    /*    !*margin-bottom: 2px;*!*/
    /*    !*!*left: auto;*!*!*/
    /*    !*!*border-bottom: #42b983;*!*!*/
    /*    !*!*padding-bottom: 100px;*!*!*/
    /*    !*margin-top: 15px;*!*/
    /*    !*margin-left: 20%;*!*/
    /*    !*margin: auto;*!*/
    /*    margin:0 auto;*/
    /*}*/

</style>